import React from 'react'
import {List ,Button} from 'antd-mobile'
class App extends React.Component{
    constructor(props){
        super(props)
        this.state={
            soider:['aaa','bbb','ccc']
        }
        // this.addSolder=this.addSolder.bind(this)
    };
    componentWillMount(){
        console.log('componentWillMount')
    }
    componentDidMount(){
        console.log('componentDidMount')

    }
    addSolder(){
        console.log(this);
        this.setState({
            soider:[...this.state.soider,'新兵蛋子'+Math.random()*10]
        })
    }
    render (){
        const boss = '李云龙'
        
        return (
            <div>
                <h2>独立团 {boss}</h2>
                <一营 老大={'sb'}/>
                <骑兵连 老大={'sb2'}/>
                <Button type='primary' onClick={()=>{this.addSolder()}}>新兵入伍</Button>
                <List renderHeader='士兵列表'>
                        {this.state.soider.map((v,index)=>{
                            return <List.Item  key={index}
                            extra={index}
                            arrow='horizontal'
                            >{v}</List.Item >
                        })}
                </List>
                
                    
                        
                    
                
            </div>
            
        )
    }
}
function  骑兵连(params) {
    console.log(params)
    return <h2>骑兵连 老大{params.老大}冲鸭！</h2>
}
class 一营 extends React.Component{
    render(){
        console.log(this.props)
        const boss='张大庙'
        return <h2>一营营长 ，{this.props.老大}</h2>
    }
} 
export default App